<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="css/bubbles.css">
    <link rel="stylesheet" type="text/css" href="css/blog.css">
</head>
<body>
    <div class="nano">
        <div class="nano-content">
            <div class="square-wrapper">
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
            <div class="user-face-area">
                <img id="left-wing" src="img/wl.png"></img>
                <div class="user-face-img-area">
                    <img src="face.jpg" width="200px" id="face"></img>
                    <div id="user-name">剃切绘里奈</div>
                    <div id="user-desc">难吃死啦~~难吃死啦~~难吃死啦~~</div>
                </div>
                <img id="right-wing" src="img/wr.png"></img>
            </div>    
            
            <div class="card-area">
                <div class='ribbon'>
                    <a href="#"><span>网站首页</span></a>
                    <a href="#"><span>分类浏览</span></a>
                    <a href="#"><span>标签墙</span></a>
                    <a href="#"><span>时间轴</span></a>
                    <a href="#"><span>关于作者</span></a>
                </div>
            </div>
            
            <div class="list-area">
                <div class="list-item">
                    <div class="list-item-aside">
                        <img src="c4.jpeg" />
                        <div class="list-item-meta">
                            <div class="meta-date">2015-12-11</div>
                            <div class="meta-time">15:20:22</div>
                            <div class="meta-week">星期五</div>
                            <div class="meta-long">— 来自1年前的 <a href="#">故事故事故事故</a></div>
                        </div>
                    </div>
                    <div class="list-item-content">
                        <div class="article-title">
                            ddfgsdg发射点发了卡死了的烦恼
                        </div>
                        <div class="article-tags">
                            <a href="#">中文</a>
                            <a href="#">english</a>
                            <a href="#">longlonglonglonglong</a>
                        </div>
                        <div class="article">
                            <div>随便写点什么</div>
                            <div style="text-align: center;">
                                <img src="c4.jpeg" style="
                                    border: 2px solid #ccc;
                                    border-radius: 3px;
                                    width: 350px;">
                                <div>图1 完全不知道是什么意思的图片</div>
                            </div>
                        </div>
                        <hr class="article-end" />
                        <div class="article-cover" style="display:none;"></div>
                    </div>
                </div>
                <div class="load-target">
                    <div class="load-target-text">加载更多→</div>
                    <canvas width="450px" height="100px"></canvas>
                </div>
            </div>  

            <footer>
                
            </footer>
        </div>
    </div>
    

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
    
    <script>
        var initItemContent = function(e) {
            var e = $(e);
            if(e.height() > 550) {
                e.find('.article-cover').show();
                e.data('real-height', e.height());
                e.css({ height: '550px' });
            }     
            return e;
        };
        
        var clickEventHandlerOnArticleCover = function() {  
            var e = $(this), p = e.parent(), c = p.parent();
            var nano = $('.nano');
            if(p.height() <= 550) {
                p.css({ height: '' + p.data('real-height') + 'px' });
            } else {
                p.css({ height: '550px' });
            }
            if(e.hasClass('article-cover')) {
                e.toggleClass('article-cover-at-end');
                e.toggleClass('article-cover');       
                c.prevAll().hide();
                nano.nanoScroller();
                nano.nanoScroller({ scrollTo: c });
                c.nextAll().hide(500);
            } else {
                c.prevAll().show();
                nano.nanoScroller();
                nano.nanoScroller({ scrollTo: c });   
                c.nextAll().show(500);                  
                setTimeout(function() {
                    e.toggleClass('article-cover-at-end');
                    e.toggleClass('article-cover');  
                }, 1000);       
            }
        };   
        
        var initArticleCover = function(e) {
            var e = $(e);
            e.click(clickEventHandlerOnArticleCover);
            return e;
        }
        
        var initItem = function(e) {
            var e = $(e);
            initItemContent(e.find('.list-item-content'));
            initArticleCover(e.find('.article-cover'));
            return e;
        }
             
        var onLoadAnimate = {
        
            animateIt: function(canvasNode, config) {
                var canvas = canvasNode.getContext('2d');
                for(var k in config) {
                    if(config.hasOwnProperty(k) && canvas[k] !== undefined) {
                        canvas[k] = config[k]; 
                    }
                }
                var proxy = function(x) {
                    return canvas[x].bind(canvas);
                }; 
                var moveTo = proxy('moveTo');
                var lineTo = proxy('lineTo');
                var fillText = proxy('fillText');
                var measureText = proxy('measureText');
                var beginPath = proxy('beginPath');
                var closePath = proxy('closePath');
                var arc = proxy('arc');
                var clearRect = proxy('clearRect');
                var fillTextCenter = function(words, x1, y1, x2, y2) {
                    var width = x2 - x1, height = y2 - y1;
                    canvas.textBaseline = "middle";
                    fillText(words, x1 + width / 2 - measureText(words).width / 2, y1 + height / 2);
                    canvas.stroke();
                }
                var drewCircle = function(x, y, r) {
                    beginPath();
                    arc(x, y, r, 0, Math.PI * 2, true);
                    closePath();   
                    canvas.fill();
                }
                return {
                    cl: clearRect,    
                    tx: fillTextCenter,
                    cr: drewCircle,
                    mt: measureText,
                };
            },
            
            startAndHold: function(area) {
                $(area).show();
                var aha = this.animateIt(area, { font: '55px Arial', strokeStyle: 'black', fillStyle: 'grey' });
                var w = [ 320, 340, 360, 380 ];
                aha.tx("少女祈祷中", 0, 0, 300, 100);
                var dp = function(w) {
                    aha.tx('.', w, 0, w + 16, 100);
                };
                var dc = function(x) {
                    aha.cr(x + 5, 50, 5);
                };            
                return setInterval(function() {
                    aha.cl(300, 0, 450, 100);
                    for(var i = 0; i < w.length; ++i) {
                        dc(w[i]);
                        if(w[i] <= 320 || w[i] >= 390) w[i] += 5; else w[i] += 2;
                        if(w[i] >= 410) w[i] = 300;
                    }  
                }, 25);                
            },
            
            stopAndRelease: function(timer, area) {
                $(area).hide(500);
                clearInterval(timer);
            }
        };
            
        var loadArticles = function() {
        
            var deferred = $.Deferred();
            
            var data = [ `
                <div class="list-item">
                    <div class="list-item-aside">
                        <img src="c4.jpeg" />
                        <div class="list-item-meta">
                            <div class="meta-date">2015-12-11</div>
                            <div class="meta-time">15:20:22</div>
                            <div class="meta-week">星期五</div>
                            <div class="meta-long">— 来自1年前的 <a href="#">故事故事故事故</a></div>
                        </div>
                    </div>
                    <div class="list-item-content">
                        <div class="article-title">
                            ddfgsdg发射点发了卡死了的烦恼
                        </div>
                        <div class="article-tags">
                            <a href="#">中文</a>
                            <a href="#">english</a>
                            <a href="#">longlonglonglonglong</a>
                        </div>
                        <div class="article">
                            <div>随便写点什么</div>
                            <div style="text-align: center;">
                                <img src="c4.jpeg" style="
                                    border: 2px solid #ccc;
                                    border-radius: 3px;
                                    width: 350px;">
                                <div>图1 完全不知道是什么意思的图片</div>
                            </div>
                        </div>
                        <hr class="article-end" />
                        <div class="article-cover" style="display:none;"></div>
                    </div>
                </div>              
            ` ];
            
            data.push(data[0]); data.push(data[0]); data.push(data[0]);
            
            setTimeout(() => deferred.resolve(data), 1000);
            
            return deferred.promise();
        }     
            
        $(function() {
        
            /* 扫描过长的文章 添加折叠 */
            $('.list-item-content').each(function(i, e) {
                initItemContent(e);
            });
            
            /* 滚动条 */
            $('.nano').nanoScroller(); 

            /* 绑定折叠逻辑 */
            $('.article-cover').click(clickEventHandlerOnArticleCover);
            
            /* 加载更多 */
            $('.load-target').click(function() {
                var target = $(this);
                var canvasNode = $('.load-target canvas')[0];
                var onLoadText = target.find('.load-target-text');
                var nano = $('.nano');
                var reset = function() {
                    onLoadAnimate.stopAndRelease(animate, canvasNode);
                    target.data('active', false);
                    onLoadText.show(500);
                };
                if(!target.data('active')) {
                    target.data('active', true);
                    onLoadText.hide();
                    var animate = onLoadAnimate.startAndHold(canvasNode);
                    $.when(loadArticles()).then((articles) => {
                        articles.map((e) => $(e))
                                .map((e) => e.insertBefore(target))
                                .map((e) => initItem(e))
                                .map((e) => e.hide())
                                .map((e) => e.fadeIn(500, () => nano.nanoScroller()));   
                        reset();
                    }, () => {
                        reset();
                    });
                }
            });
        }); 
          
    </script>
</body>
</html>